<template lang="pug">
n-popover(trigger="hover")
  template(#trigger)
    svg-icon.icon(:icon="props.icon ? props.icon : 'question'" :color="props.disabled ? 'darkgrey' : props.color" :size="props.size" @click="ev_click")
  span {{ props.text }}
</template>

<script setup lang="ts">
import { computed } from "vue";

const props = withDefaults(defineProps<{
  icon?: string
  nIcon?: string
  text: string
  color?: string
  size?: string | number
  disabled?: boolean
}>(), {
  icon: '',
  nIcon: '',
  text: '提示',
  size: 20,
  color: 'currentColor',
  disabled: false
})

const emit = defineEmits(['click'])

const ev_click = () => {
  if (props.disabled) return
  emit('click')
}

const cursor = computed(() => {
  return props.disabled ? 'no-drop' : 'pointer'
})

</script>

<style lang="scss" scoped>

.icon {
  user-select: none;
  cursor: v-bind(cursor);
}

</style>